﻿
@{
    ViewData["Title"] = "ModuleMenus";
    Layout = "~/Areas/Admin/Views/Shared/_VueLayout.cshtml";
}

@section header{

}
    <div id="app">
        <div id='wrapper'>
         
            <div class="container">

                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <i class="el-icon-s-order"></i>  系统用户
                    </div>

                    <div class="handle-box">

                        <el-select v-model="queryModel.status" class='handle-select mr10' placeholder="选择启用状态">
                            <el-option label='启用' value='true'></el-option>
                            <el-option label='禁用' value='false'></el-option>
                        </el-select>

                        <el-input v-model="queryModel.keyword" class='handle-input mr10' placeholder="请输入用户名/姓名/部门/电话"></el-input>


                        <el-button type="primary" v-on:click="handleSearch">查询</el-button>

                        <el-button type="primary" icon="el-icon-plus" v-on:click='handleAdd' class="handle-del mr10">新增用户</el-button>
                        <el-button type="warning" icon="el-icon-unlock" v-on:click='handleResetPassword' class="handle-del mr10">重置密码</el-button>


                        <el-button type="danger" icon="el-icon-delete" class="handle-del mr10" v-on:click="handleDelAllSelection">批量删除</el-button>


                    </div>

                    <el-table v-on:selection-change="handleSelectionChange" :data="tableData" style="width: 100%;margin-bottom: 20px;"
                              row-key="id" border>
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="uid" label="Uid" width="280">
                        </el-table-column>
                        <el-table-column prop="loginName" label="用户名" width="120">
                        </el-table-column>
                        <el-table-column prop="realName" label="真实姓名" width="100">
                        </el-table-column>
                        <el-table-column prop="phone" label="手机号码" width="150">
                        </el-table-column>
                        <el-table-column prop="loginCount" label="登录次数" sortable width="100">
                        </el-table-column>
                        <el-table-column prop="rolename" label="所属角色" width="180">
                        </el-table-column>

                        <el-table-column prop="status" width="80px" label="启用">
                            <template slot-scope="scope">
                                <el-switch v-on:change="statusChange(scope.row)" v-model="scope.row.status" active-color="#13ce66" inactive-color="#ddd">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="modifiedTime" label="更新时间">
            </el-table-column>
            <el-table-column prop="modifier" label="更新人">
            </el-table-column> -->

                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">

                                <el-button type="text" icon="el-icon-edit" v-on:click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="text" icon="el-icon-delete" class="red" v-on:click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>


                    <div class="pagination" style="text-align: center;">
                        <el-pagination v-on:current-change="handleCurrentChange" :current-page.sync="queryModel.pageModel.page" :page-sizes="[10, 20, 50, 80]"
                                       :page-size="queryModel.pageModel.rows" layout="total,sizes, prev, pager, next" :total="total">
                        </el-pagination>

                    </div>


                </el-card>
            </div>

            <!-- 增改弹出框 -->
            <el-dialog :title="formModel.uid==''?'新增用户':'编辑用户'" :visible.sync="formVisible" width="30%">
                <el-form ref="formMain" label-width="70px">
                    <el-form-item label="用户名">
                        <el-input v-model="formModel.loginName"></el-input>
                    </el-form-item>

                    <el-form-item label="姓名">
                        <el-input v-model="formModel.realName"></el-input>
                    </el-form-item>

                    <el-form-item label="手机号码">
                        <el-input v-model="formModel.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="formModel.sex">
                            <el-radio-button label="1">男</el-radio-button>
                            <el-radio-button label="0">女</el-radio-button>
                            <el-radio-button label="2">不详</el-radio-button>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="是否启用">
                        <el-switch v-model="formModel.status" active-color="#13ce66" inactive-color="#ddd">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="所属角色">
                        <el-select v-model="formModel.roleList" multiple placeholder="请选择">
                            <el-option v-for="item in roleList" :key='item.value' :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button v-on:click="formVisible = false">取 消</el-button>
                    <el-button type="primary" v-on:click="saveForm">确 定</el-button>
                </span>
            </el-dialog>

        </div>


    </div>


@section footer{
    <script type="text/javascript">

        new Vue({
           el:"#app",
            data: function () {
                return {
                    queryModel: {
                        keyword: "",
                        status: null,
                        pageModel: {
                            page: 1,
                            rows: 10
                        }
                    },
                    roleList: [],
                    tableChecked: [],
                    tableData: [],
                    total: 0,
                    formVisible: false,
                    formModel: {
                        // roleids: [24],
                        loginName: '',
                        realName: '',
                        phone: '',

                        uid: "",
                        sex: 2,
                        status: true
                    }

                }
            },
            created() {
                var that = this;
                this.getDatas();
                this.getRoles();
            },
            methods: {
                getRoles: function () {
                    var that = this;
                    request.get('/admin/role/select').then(function (res) {
                        that.roleList = res.data;
                    });
                },
                getDatas: function () {
                    var that = this;
                    request.post("/admin/account/query", that.queryModel).then(function (res) {
                        console.log(res.data);
                        res.data.rows.forEach(function (item) {
                            var rolename = "未设置角色";
                            if (item.roles.length > 0) {
                                rolename = "";
                                for (var i = 0; i < item.roles.length; i++) {
                                    rolename = rolename + item.roles[i].label;
                                    if (i < item.roles.length - 1) {
                                        rolename = rolename + ",";
                                    }
                                }

                            }
                            item.rolename = rolename;

                        });
                        that.tableData = res.data.rows;

                        that.total = res.data.total;
                    });
                },
                statusChange: function (obj) {
                    var that = this;
                    request.put("/admin/Account/StatusChange?uid=" + obj.uid + "&status=" + obj.status, {}).then(function (res) {
                        that.$message.success(res.data.msg);
                    });
                    console.log(obj);
                },
                handleAdd: function () {
                    var that = this;

                    this.formModel = {
                        status: true,
                        uid: "",
                        sex: 2
                    };
                    this.formVisible = true;
                },
                handleEdit: function (index, row) {
                    var roleids = [];
                    if (row.roles.length > 0) {

                        for (var i = 0; i < row.roles.length; i++) {
                            roleids.push(row.roles[i].value);
                        }

                    }
                    // row.sex=1;
                    //  row.roleids=[24];
                    // this.formModel.roleids = row.roleids;

                    row.roleList = roleids;
                    this.formModel.roleList = row.roleList;
                    this.formModel.loginName = row.loginName;
                    this.formModel.realName = row.realName;
                    this.formModel.sex = row.sex;
                    this.formModel.phone = row.phone;
                    this.formModel.uid = row.uid;
                    this.formModel.status = row.status;
                    // this.formModel.roleids=roleids;
                    this.formVisible = true;
                },
                saveForm: function () {
                    this.formModel.roles = this.formModel.roleids;
                    if (this.formModel.uid) {
                        this.saveEdit();
                    } else {
                        this.saveAdd();
                    }

                },
                saveEdit: function () {
                    var that = this;
                    request.put("/admin/Account/Update", that.formModel).then(function (res) {
                        that.formVisible = false;
                        that.$message.success(res.data.msg);
                        that.getDatas();
                    });
                },
                saveAdd: function () {
                    var that = this;
                    request.post("/admin/Account/Add", that.formModel).then(function (res) {
                        that.formVisible = false;
                        if (res.data.code == 1) {
                            that.$message.success(res.data.msg);
                        } else {
                            that.$message.warning(res.data.msg);
                        }
                        that.getDatas();
                    });
                },
                handleSelectionChange: function (val) {
                    this.tableChecked = val;
                },
                handleCurrentChange: function (index) {
                    this.queryModel.pageModel.page = index;
                    this.getDatas();
                },
                handleSearch: function () {
                    this.getDatas();

                },
                handleResetPassword: function () {
                    var that = this;
                    if (this.tableChecked.length != 1) {
                        this.$message.warning("请选择一条记录进行操作！");
                        return;
                    }

                    this.$confirm('确定重置此用户密码, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {

                        request.put("/admin/account/ResetPassword?uid=" + that.tableChecked[0].uid).then(res => {
                            if (res.data.code == 1) {
                                that.$message.success(res.data.msg);
                            } else {
                                that.$message.warning(res.data.msg);
                            }
                        });

                    });

                },
                handleDelAllSelection: function () {
                    var that = this;
                    if (this.tableChecked.length == 0) {
                        this.$message.warning("请选择要操作的项！");
                        return;
                    }

                    this.$confirm('此操作将永久删除选定项, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var ids = [];
                        that.tableChecked.forEach(element => {
                            ids.push(element.id)
                        });

                        request.delete("/admin/role/DeleteList?ids=" + ids.join('&ids=')).then(res => {
                            that.$message.success(res.data.msg + ",删除数据" + res.data.data + "条！");
                            that.getDatas();

                        });
                    });

                },
                handleDelete: function (index, row) {
                    var that = this;
                    this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        request.delete("/admin/account/Delete?uid=" + row.uid).then(function (res) {
                            if (res.data.code == 1) {
                                that.$message.success(res.data.msg);
                            } else {
                                that.$message.warning(res.data.msg);
                            }
                            that.getDatas();
                        });

                    });

                }


            }

        })

    </script>

}
